<template>
  <div>
    {{ money }}<br />
    <!--
      语法：
      v-on:事件名="少量代码"
      v-on:事件名="事件处理函数”
      v-on:事件名=“事件处理函数（参数）"
      简写@事件名="事件处理函数”
    -->
    <button v-on:click="money++">+1</button>
    <button v-on:click="addMoney">+10</button>
    <button @click="addXMoney(2)">+2</button>
    <button @click="addXMoney(20)">+20</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      money: 100,
    };
  },
  methods: {
    addMoney() {
      if (this.money >= 200) return;
      this.money += 10;
    },
    addXMoney(num) {
      if (this.money >= 200) return;
      this.money += num;
    },
  },
};
</script>

<style lang="scss" scoped>
</style>